<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			
			<a href="javascript:history.back();" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			<p>地址管理</p>
			<!--
			<a href="javascript:;" @click="customGoBack" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			
			-->
		</header>

		<!-- 地址列表部分 -->
		<ul class="addresslist">
			<li v-for="item in deliveryAddressArr">
				<div class="addresslist-left" @click="setDeliveryAddress(item)">
					<h3>{{ item.contactName }}{{ formatSex(item.contactSex) }} {{ item.contactTel }}
					</h3>
					<p>{{ item.address }}</p>
				</div>
				<div class="addresslist-right">
					<i class="fa fa-edit" @click="editUserAddress(item.daId)"></i>
					<i class="fa fa-remove" @click="removeUserAddress(item.daId)"></i>
				</div>
			</li>
		</ul>

		<!-- 新增地址部分 -->
		<div class="addbtn" @click="toAddUserAddress">
			<i class="fa fa-plus-circle"></i>
			<p>新增收货地址</p>
		</div>
		<CustomAlert ref="customAlert" />
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import CustomAlert from '../components/CustomAlert.vue';

export default {
	name: 'UserAddress',
	data() {
		return {
			businessId: this.$route.query.businessId,
			user: {},
			deliveryAddressArr: []
		}
	},
	created() {
		this.user = this.$getSessionStorage('user');

		this.listDeliveryAddressByUserId();
	},
	components: {
		Footer,
		CustomAlert
	},
	methods: {
		navigateTo(url) {
            // 导航到指定页面
            window.location.href = url;
        },
		customGoBack() {
			const historyLength = window.history.length;
			if (historyLength > 3) {
				const state = window.history.state;
				console.log('State:', state.back);
				if (state && state.back.startsWith('/orders')) {
					window.history.go(-1);
				}else
					{
						this.navigateTo('/myPage');
				}
			} else {
				window.history.go(-1);
			}
		},
		formatSex(sex) {
			if (sex == 1) {
				return '先生';
			} else if (sex == 0) {
				return '女士';
			}
			return '未知'; // 如果性别数据不是 1 或 0，可以返回一个默认值
		},
		listDeliveryAddressByUserId() {
			//查询送货地址
			this.$axios.get(`DeliveryAddresses/userId/${this.user.userId}`)
				.then(response => {
					this.deliveryAddressArr = response.data;
				}).catch(error => {
					console.error(error);
				});
		},
		setDeliveryAddress(deliveryAddress) {
			//把用户选择的默认送货地址存储到localStorage中
			this.$setLocalStorage(this.user.userId, deliveryAddress);
			if(this.businessId==undefined){
				console.log("没有businessId");
			}
			else{
				this.$router.push({ path: '/orders', query: { businessId: this.businessId } });
			}
		},
		toAddUserAddress() {
			this.$router.push({ path: '/addUserAddress', query: { businessId: this.businessId } });
		},
		editUserAddress(daId) {
			this.$router.push({ path: '/editUserAddress', query: { businessId: this.businessId, daId: daId } });
		},
		removeUserAddress(daId) {
			if (!confirm('确认要删除此送货地址吗？')) {
				return;
			}

			this.$axios.delete(`DeliveryAddresses/daId/${daId}`)
				.then(response => {
					if (response.data > 0) {
						let deliveryAddress = this.$getLocalStorage(this.user.userId);
						if (deliveryAddress != null && deliveryAddress.daId == daId) {
							this.$removeLocalStorage(this.user.userId);
						}
						this.listDeliveryAddressByUserId();
					} else {
						this.$refs.customAlert.showAlert('删除地址失败！');
					}
				}).catch(error => {
					console.error(error);
				});
		}
	}
}
</script>

<style scoped>
/*************** 总容器 ***************/
.wrapper {
	width: 100%;
	height: 100%;
	background-color: #F5F5F5;
}

/*************** header ***************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	/*保证在最上层*/
	z-index: 1000;
}

.back-button {
	position: absolute;
	top: 3.5vw;
	/* 使用相对单位 */
	left: 2.5vw;
	/* 使用相对单位 */
	font-size: 4vw;
	/* 使用相对单位 */
	text-decoration: none;
	color: white;
	display: flex;
	align-items: center;
}

.back-button i {
	margin-right: 1vw;
	/* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
	.wrapper header {
		height: 8vh;
		/* 使用相对高度单位 */
		font-size: 3vh;
	}

	.back-button {
		top: 2.5vh;
		/* 使用相对高度单位 */
		left: 2vh;
		font-size: 2.5vh;
		/* 相对大小单位 */
	}

	.back-button i {
		margin-right: 0.5vh;
	}
}

/*************** addresslist ***************/
.wrapper .addresslist {
	width: 100%;
	margin-top: 12vw;
	background-color: #fff;
}

.wrapper .addresslist li {
	width: 100%;
	box-sizing: border-box;
	border-bottom: solid 1px #DDD;
	padding: 3vw;

	display: flex;
}

.wrapper .addresslist li .addresslist-left {
	flex: 5;
	/*左边这块区域是可以点击的*/
	user-select: none;
	cursor: pointer;
}

.wrapper .addresslist li .addresslist-left h3 {
	font-size: 4.6vw;
	font-weight: 300;
	color: #666;
}

.wrapper .addresslist li .addresslist-left p {
	font-size: 4vw;
	color: #666;
}

.wrapper .addresslist li .addresslist-right {
	flex: 1;
	font-size: 5.6vw;
	color: #999;
	cursor: pointer;

	display: flex;
	justify-content: space-around;
	align-items: center;
}

/*************** 新增地址部分 ***************/
.wrapper .addbtn {
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	border-bottom: solid 1px #DDD;
	background-color: #fff;
	margin-top: 4vw;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 4.5vw;
	color: #0097FF;
	user-select: none;
	cursor: pointer;
}

.wrapper .addbtn p {
	margin-left: 2vw;
}
</style>